<!--替身/其他任务-->
<template>
    <div id="doubleConfim">
      <!--后退-->
      <img class="back" src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)"> 
      <div class="oltrocityTHeader">
          <el-steps align-center :active="active" finish-status="success">
                <el-step title="已接单"></el-step>
                <el-step title="接单方确认"></el-step>
                <el-step title="发布方确认"></el-step>
          </el-steps>
          <img @click="callphone" class="callPhone" src="../../../assets/me/olCall.png" alt="">
          <img @click="sendMsg" class="sendMsg" src="../../../assets/me/olSetMessage.png" alt="">
          <div class="olATb">
                <!--头像 名称 星星评论 接单 退单-->
                <div class="olATbFirst">
                    <img  :src="showData.taskModel.userModel.headPortrait" alt=""></p>
                    <section class="userHeadr">
                        <div class="me">
                                <section class="userInfo">
                                    <p>{{showData.taskModel.userModel.nickName}}</p>
                                    <img v-if="showData.taskModel.userModel.sex==1" src="../../../assets/me/male.png" alt="">
                                    <img v-if="showData.taskModel.userModel.sex==2" src="../../../assets/me/women.png" alt="">
                                </section>
                                <section  class="stars">
                                    <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                                    <img v-for="item in untotal" style="width:11px;height:11px;" src="../../../assets/tabber/unstarHav.png" alt="">
                            </section>
                        </div>
                        <div class="getAndReturn">
                                <section>
                                    <img src="../../../assets/me/olget.png" alt="">
                                    <br><span>催单</span>
                                </section>
                                <section>
                                    <img src="../../../assets/me/olreturn.png" alt="">
                                    <br><span @click="chargeback">退单</span>
                                </section>
                        </div>
                    </section>
                    <section class="orderInfo">
                            <p>{{showData.amount}} ￥</p>
                            <p>{{turnTime(showData.taskModel.initiatorTime)}} 发布</p>
                    </section>
                    <section class="orderExp">
                            <p><span v-if="showData.taskModel.taskType==4">{{showData.common2}}</span><span>{{showData.taskExplain}}</span></p>
                            <p v-if="showData.taskModel.womanSum"><img src="../../../assets/homepage/gril.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">仅限女生</span></p>
                            <p v-if="showData.taskModel.manSum"><img src="../../../assets/homepage/boy.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">仅限男生</span></p>
                            <p v-if="showData.taskModel.allSum"><img src="../../../assets/homepage/un.png" alt=""><br><span style="font-size:0.6rem;color:#9a9a9a;">男女不限</span></p>
                    </section>
                </div>
          </div>
      </div>
      <button class="olBtn"  @click="confirmOrder">确认订单</button>
    </div>
</template>
<script>
import turnTime from '../../../server/dataTime.js'
 export default {
     data(){
         return {
             total:undefined,
             untotal:undefined,
             turnTime:turnTime,
             showData:{
                 taskModel:{
                     userModel:{
                         nickName:undefined,
                     }
                 }
             },
             active:0
         }
     },
      created(){
         this.getDetailData()
     },
      methods:{
          chargeback(){
            this.$api.chargeback(this.showData.id).then((res)=>{
                if(res.code=='000000'){
                   //
                }
            })
          },
        //  根据id获取详情
        getDetailData(){
            this.$api.getorderCommBI(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.showData = res.data
                    this.total = this.showData.taskModel.userModel.totalStar;
                    this.untotal = 5-Number(this.total)
                }
            })
        },
        // 确认订单
        confirmOrder(){
             this.$api.confirmOrder(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.$router.push({
                        path: '/Evaluation/'+this.showData.id,
                    })
                }
            })
        },
        callphone(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        },
        sendMsg(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        }
     }
 }
</script>
<style lang="">
#doubleConfim{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olBackground.png);
}
#doubleConfim .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
    z-index:2;
}
#doubleConfim .el-steps{
    padding-top:0.8rem;
}
#doubleConfim .el-step__icon.is-text {
    border-radius: 50%;
    border: 0px solid;
    border-color: inherit;
}
#doubleConfim .el-step__icon{
    width: 1rem;
    height: 1rem;
    font-size: 0px;
}
#doubleConfim .el-step__icon.is-text{
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0px;
}
#doubleConfim .el-step.is-horizontal .el-step__line {
    top: 0.75rem;
}
#doubleConfim .el-step__title.is-process {
    font-weight: 500;
    color: #303133;
}
#doubleConfim .el-step__title {
    font-size: 0.8rem;
    line-height: 1.25rem;
    color:#fff;
}
#doubleConfim .el-step__title.is-process{
    font-size: 0.8rem;
    line-height: 1.25rem;
    color:#fff;
}
#doubleConfim .olATb{
    height:60vh;
    width:93.33%;
    margin:3rem auto;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olRubbitBackground.png);
}
#doubleConfim .olATbFirst{
    height:100%;
    width:100%;
}
#doubleConfim .olATbFirst > img{
    height:9vh;
    border-radius:50%;
    margin: 10.5vh 0px 0px 13vw;
}
#doubleConfim .olATbFirst .userHeadr{
    display:flex;
    margin:1vh 0px 1vh 10vw;
}
#doubleConfim .olATbFirst .userHeadr .me{
    width:35vw;
}
#doubleConfim .olATbFirst .userHeadr .me .userInfo{
    display:flex;
    color:#000000;
    font-weight:700;
    font-size:0.9rem;
}
#doubleConfim .olATbFirst .userHeadr .me .userInfo > img{
    height:0.75rem;
    width:0.75rem;
    margin-left:0.25rem;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn{
    width:6rem;
    height:2rem;
    display:flex;
    padding-top:0.4rem;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(1){
    width:50%;
    line-height:1;
    text-align:center;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(1) > img{
    height:1.3rem;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(1) > span{
    font-size:0.8rem;
    color:#34a498;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(2){
    width:50%;
    line-height:1;
    text-align:center;
    border-left:1px solid #e2e2e2;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(2) > img{
    height:1.3rem;
}
#doubleConfim .olATbFirst .userHeadr .getAndReturn > section:nth-child(2) > span{
    font-size:0.8rem;
    color:#d72109;
}
#doubleConfim .olATbFirst .orderInfo{
    display:flex;
    margin:2rem 0px 0px 1rem;
    width:90%;
    justify-content:space-between;
}
#doubleConfim .olATbFirst .orderInfo > p:nth-child(1){
    font-size:1.2rem;
    color:#34a498;
}
#doubleConfim .olATbFirst .orderInfo > p:nth-child(2){
    font-size:0.8rem;
    color:#888888;
    margin-top:0.5rem;
}
#doubleConfim .olATbFirst .orderExp{
    display:flex;
    margin:0.75rem 0px 0px 0.75rem;
    width:90%;
    justify-content:space-between;
}
#doubleConfim .olATbFirst .orderExp > p{
    font-size:0.8rem;
    color:#000000;
}
#doubleConfim .olATbFirst .orderExp > p >img{
    height:1.5rem;
    width:2.25rem;
}
#doubleConfim .stars > img{
    height:0.75rem;
    width:0.75rem;
}
#doubleConfim .callPhone{
    position:absolute;
    right:5.5rem;
    top:7.25rem;
    width:3.4rem;
    height:4rem;    
}
#doubleConfim .sendMsg{
    position:absolute;
    right:1.5rem;
    top:9rem;
    width:3.4rem;
    height:4rem;
}
#doubleConfim .olBtn{
  height:2rem;
  width:50%;
  margin:0px 25%;
  text-align:center;
  line-height:2rem;
  font-size:0.8rem;
  color:#FFF;
  border-radius:13px;
  background:#29a193;
}
</style>
